<template>
	<div id="out">
		<el-button type="mini" @click="showAdd()">新增</el-button>
		<input type="text" placeholder="请输入项目名查询" v-model="projectName" id="projectName">	
		<div id="showAddPage" style="display: none;">
			<input type="text" placeholder="项目名" v-model="ProjectParam.projectName" class="addIn">
			<input type="text" placeholder="项目详情" v-model="ProjectParam.projectDetail" class="addIn">
			<input type="textarea" placeholder="项目介绍" v-model="ProjectParam.projectIntroduction" class="addIn">
			<input type="text" placeholder="创建人" v-model="ProjectParam.createbyName" class="addIn">
			<input type="text" placeholder="状态" v-model="ProjectParam.projectState" class="addIn">
			</br>
			<input type="button" value="提交" @click="addProject()" class="addButton" >
			<input type="button" value="关闭" @click="closeAdd()()" class="addButton" >
		</div>
		
		<div id="showUpdatePage" style="display: none;">
			<input type="text" placeholder="项目名" v-model="ProjectParam.projectName" class="addIn">
			<input type="text" placeholder="项目详情" v-model="ProjectParam.projectDetail" class="addIn">
			<input type="textarea" placeholder="项目介绍" v-model="ProjectParam.projectIntroduction" class="addIn">
			<input type="text" placeholder="创建人" v-model="ProjectParam.createbyName" class="addIn">
			<input type="text" placeholder="状态" v-model="ProjectParam.projectState" class="addIn">
			</br>
			<input type="button" value="提交" @click="updateProject()" class="addButton" >
			<input type="button" value="关闭" @click="closeUpdate()" class="addButton" >
		</div>
		<el-table :data="tableData" border style="width: 85%" id="table">
			
			<el-table-column fixed prop="projectId" label="项目编号" width="150" align=center>
			</el-table-column>
			<el-table-column prop="projectDetail" label="项目名称" width="150" align=center>
			</el-table-column>
			<el-table-column prop="projectName" label="项目详情" width="150" align=center>
			</el-table-column>
			<el-table-column prop="projectIntroduction" label="项目简介" width="150" align=center>
			</el-table-column>
			<el-table-column prop="createbyName" label="创建人" width="150" align=center>
			</el-table-column>
			<el-table-column prop="projectState" label="状态" width="150" align=center>
			</el-table-column>
			<el-table-column fixed="right" label="操作" align=center width="150">
				<div class="handler">更新</div>
				<template slot-scope="scope">
					<el-button type="mini" @click="showUpdatePage(scope.row)">
						更新
					</el-button>
					<el-button type="mini" @click="deleteProject(scope.row)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>

</template>

<script>
	import $ from "jquery"
	export default {
		inject:['reload'],
		methods: {
			showUpdatePage:function(value){
				$("#showUpdatePage").attr("style","display:block");
				this.ProjectParam.projectId=value.projectId
			},
			updateProject:function(){
				var thii = this
				$.ajax({
					url: "http://localhost/project",
					data:thii.ProjectParam,
					type:"PUT",
					success: function(data) {
						thii.reload();
						alert(data.message)
						thii.closeUpdate()
						thii.showProject()
					}
				})
			},
			deleteProject: function(value) {
				$.ajax({
					url: "http://localhost/project",
					data: {
						"id": value.projectId
					},
					type: "DELETE",
					success: function(data) {
						thii.reload();
						alert(data.message)
						thii.showProject()
					}
				})
			},
			addProject: function() {
				var thii = this
				$.ajax({
					url: "http://localhost/project",
					data: thii.ProjectParam,
					type: "POST",
					success: function(data) {
						thii.reload();
						alert(data.message)
						thii.closeAdd()
						thii.showProject()
					}
				})
			},
			showProject: function() {
				var thii = this
				$.ajax({
					url: "http://localhost/project",
					type: "GET",
					success: function(data) {
						thii.tableData = data.list
					}
				})
			},
			queryByName:function(){ 
				var thii = this
				$.ajax({
					url:"http://localhost/project/queryByName",
					type:"GET",
					data:{"projectName":$("#projectName").val()},
					success:function(data){
					thii.tableData = data.list
					}
				})
			},
			showAdd: function() {
				$("#showAddPage").attr("style", "display:block");
			},
			closeAdd: function() {
				$("#showAddPage").attr("style", "display:none");
			},
			closeUpdate:function(){
				$("#showUpdatePage").attr("style", "display:none");
			}
			
		},
		created: function() {
			this.showProject();
		},
		watch:{
			"projectName":function(){
				this.queryByName()
			}
		},
		data() {
			return {
				tableData: [
				],
				ProjectParam: {
					projectName:"",
					projectDetail:"",
					projectIntroduction:"",
					createbyName:"",
					projectState:"",
					sex:"",
				},
				projectName:"",
				
			}
		},

	}
</script>

<style>
	.handler {
		float: left;
		margin-left: 20px;
	}

	#showAddPage {
		border: 1px solid red;
		width: 20%;
		height: 250px;
		position: absolute;
		margin-top: 100px;
		margin-left: 600px;
		z-index: 5;
		background-color: #696969;
	}
	#showUpdatePage{
		border: 1px solid red;
		width: 20%;
		height: 250px;
		position: absolute;
		margin-top: 100px;
		margin-left: 600px;
		z-index: 5;
		background-color: #696969;
	}

	#table {
		margin-left: 100px;
		margin-top: 50px;
	}

	.addIn {
		margin-top: 25px;
	}

	.addButton {
		margin-left: 15px;
	}
</style>

